<template>
  <XForm ref="XForm" :formList="formList" :formData="formData" label-position="top">
    <template v-slot:btn>
      <XBtn :formData="formData" :XForm="$refs['XForm']" @onSubmit="onSubmit" />
    </template>

    <template v-slot:fireExtinguisher="{prop}">
      <el-slider v-model="formData[prop]" />
    </template>
  </XForm>
</template>

<script>
import { XForm } from '@/components/@fhsy/x-tool'
import XBtn from '@/components/common/XBtn'
export default {
  components: { XForm, XBtn },
  data: () => ({
    formList: [
      { label: '城市',
        prop: 'city',
        type: 'XSelect',
        options: [
          { label: '北京', value: 'Beijing' },
          { label: '上海', value: 'Shanghai' },
          { label: '广州', value: 'Guangzhou' }
        ],
        attrs: {
          multiple: true,
          filterable: true,
          allowCreate: true,
          defaultFirstOption: true
        }
      },
      { label: '灭火器', prop: 'fireExtinguisher', slot: 'fireExtinguisher', tips: '自造控件' },
      { slot: 'btn', span: 24 }
    ],
    formData: {}
  }),
  methods: {
    onSubmit () {
      this.$message(`回调: ${JSON.stringify(this.formData)}`)
    }
  }
}
</script>
